<template>
    <draggable
        :group="{
            name: 'Element',
            put: false, //允许拖入
            pull: 'clone',
        }"
        itemKey="id"
        :sort="false"
        :clone="clone"
        drag-class="drag"
        :force-fallback="true"
        :list="state"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
    >
        <template #item="{ element }">
            <div class="item">{{ element.Name }}</div>
        </template>
    </draggable>
</template>
<script setup>
import { ref, reactive } from "vue";
import draggable from "vuedraggable";
import Element from "../../antd/index";

const groupA = {
    name: "Element",
    put: false, //允许拖入
    pull: "clone",
};
const state = ref([
    // { Name: '栅格 (Grid)', id: 'Grid' },
    // { Name: '按钮 (Button)', id: 'Button' },
    // { Name: '标题 (Title)', id: 'Title' },
    // { Name: '分割线 (Divider)', id: 'Divider' },
]);

for (const key in Element.UI) {
    const element = Element.UI[key];
    state.value.push({
        key: key,
        Name: element.Name,
        Type: element.Type,
        Id: element.Id,
        children: [],
    });
}
let _order = 1;
const CreateItemId = () => (_order += 1);

const clone = (e) => {
    var _data = JSON.parse(JSON.stringify(Element[e.Type][e.key].cloneData));
    _data.Id = e.Id;
    _data.ViewType = e.Type;
    _data.ViewName = e.Name;
    _data.OrderId = CreateItemId();
    return _data;
};
</script>
<style scoped>
.ghost {
    background-color: rgba(127, 197, 255, 0.774);
}

.drag {
    display: inline-block !important;
}

.item {
    padding: 8px;
    border: 1px solid #ccc;
    margin-bottom: 8px;
    cursor: move;
}
</style>
